<template>
	<div class="content" :style="viewColor">
		<view class='search acea-row row-between-wrapper'>
			<view class='input acea-row row-between-wrapper'>
				<text class='iconfont icon-sousuo2'></text>
				<input type='text' :value='searchValue' :focus="focus" placeholder='请输入医生名称'
					placeholder-class='placeholder' @input="setValue"></input>
			</view>
			<view class='bnt' @tap='searchBut'>搜索</view>
		</view>

		<view class="talk-content" v-if="talkList.length>0">

			<view class="talk-item" v-for="(item,index) in talkList" @click="clickTalk(item)">
				
				<text class="asknum" v-if="item.num && item.num>0">{{item.num}}</text>
				<view class="item-top">
					<view class="item-time">
						咨询时间: {{item.create_time}}
					</view>
					<view class="item-type-box">
						<view class="item-type video" v-if="item.type == 2">
							<text class="yyfont yy-record-video">视频问诊</text>
						</view>
						<view v-else class="item-type normal">
							<text class="yyfont yy-tubiaopinglunshu">普通问诊</text>
						</view>
					</view>
				</view>
				<view class="bot-dot-box">
					<view class="dot left"></view>
					<view class="line"></view>
					<view class="dot right"></view>
				</view>
				<view class="item-bot">
					<view class="doctor">
						咨询医生: {{item.doctor_name}}
					</view>
					<view class="patient-box">
						<view class="patient">
							咨询患者: {{item.patient_name}}
						</view>
						<view v-if="item.conversation_status == 1" class="status-finish">已完成</view>
						<view v-else-if="item.conversation_status == 2" class="status-cancel">已取消</view>
						<view v-else class="status-ing">未完成</view>
						<!-- <view :class="item.conversation_status == 1 ?'':'status' ">{{getStatus(item)}}</view> -->
					</view>
				</view>
			</view>

			<view class='loadingicon acea-row row-center-wrapper' @click="clickMore">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
		</view>
		<view class="talk-nodata" v-else>
			<emptyPage title="暂无记录～"></emptyPage>
		</view>

		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"
			:isGoIndex="true"></authorize>
		<!-- #ifndef H5 -->
		<passwordPopup></passwordPopup>
		<!-- #endif -->

	</div>
</template>
<script>
	import emptyPage from '@/components/emptyPage.vue';
	
	import {
		getOnlineList,
		getConversationStatus
	} from '@/api/inquiry.js';
	
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';
	// #ifndef H5
	import passwordPopup from '@/components/passwordPopup';
	// #endif
	export default {
		components: {
			emptyPage,
			// #ifndef H5
			passwordPopup,
			// #endif
			authorize
		},
		data() {
			return {
				searchValue: '',
				focus: false,
				where: {
					'page': 1,
					'keyword': ''
				},
				loadTitle: '加载更多',
				loading: false,
				loadend: false,
				talkList: [],
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权

			};
		},
		computed: mapGetters(['isLogin', 'viewColor', 'uid','routeError']),
		onLoad() {
			if(this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}
			
			this.$nextTick(() => {

				if (this.isLogin) {
					// this.getTalkList();
				} else {
					this.openAuto()
				}

				uni.$on('xz_refresh_list', () => {
					this.where.page = 1;
					this.getTalkList();
				})
			});
		},
		onShow() {
			if (this.isLogin){
				this.searchBut();
			}
		},
		onHide() {


		},
		onUnload() {

		},
		onPullDownRefresh() {
			console.log('rk==>refresh')
			this.loadend = false;
			this.where.page = 1;
			this.clickMore();
		},
		onReachBottom() {
			this.clickMore();
		},
		methods: {

			// 打开授权
			openAuto() {
				this.isAuto = true;
				this.isShowAuth = true
			},
			// 授权回调
			onLoadFun() {
				this.getTalkList();

				this.isShowAuth = false
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// getStatus(item) {
			// 	let status;
			// 	if(item.conversation_status == 1){
			// 		status = '已完成'
			// 	}else if(item.conversation_status == 2){
			// 		status = '已取消'
			// 	}else {
			// 		status = '未完成';
			// 	}
			// 	return status;
			// },
			setValue: function(event) {
				this.$set(this, 'searchValue', event.detail.value);

				this.where.keyword = this.searchValue;

				console.log('rk==>[...]' + JSON.stringify(this.searchValue));
				// 清空自动搜索
				if (this.searchValue == '') {
					this.searchBut();
				}
			},
			searchBut: function() {
				this.where.page = 1;
				this.getTalkList();
			},
			/**
			 * 列表
			 */
			getTalkList() {
				this.where.uid = this.uid;
				console.log('rk==>[...]'+JSON.stringify(this.where));
				let that = this;
				
				getOnlineList(this.where).then(res => {
					console.log('rk==>[list]'+JSON.stringify(res));
					uni.stopPullDownRefresh();
					if (that.where.page == 1) {
						that.talkList = [];
					}
					let resList = res.data.list;
					let allCount = res.data.count;
					that.talkList = that.$util.SplitArray(resList, that.talkList);
					that.$set(that, 'talkList', that.talkList);
					let loadend = that.talkList.length >= allCount;

					console.log('rk==>[xx]' + allCount + '[xx]' + that.talkList.length + '[bool]' + loadend);

					that.loadend = loadend;
					that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
					that.where.page += 1;
					that.loading = false;
				});
			},
			/**
			 * 更多
			 */
			clickMore() {
				if (this.loadend) {
					uni.stopPullDownRefresh();
					return
				}
				this.getTalkList();
			},
			/**
			 * 点击事件
			 */
			clickTalk(item) {
				console.log('rk==>[click]' + JSON.stringify(item.conversation_id));

				let where = {
					'conversation_id': item.conversation_id,
				}
				let that = this;
				getConversationStatus(where).then(res => {
					if (res.status == 200) {
						
						that.jumpUrl(item, res.data);
					} else {
						that.$util.Tips({
							title: res.message
						})
					}
				}).catch(err => {
					console.log('rk===>' + JSON.stringify(err))
					that.$util.Tips({
						title: err
					});
				});
			},
			jumpUrl(item, resData) {
				
				// status:0-问诊中  1-已完成
				let status = resData.info;
				// type:0-图文  1-在线  2-视频
				let conversition_type = resData.type
				// can_refund: 1-能取消  0-不能取消【当type=2时有效】
				let can_refund = resData.can_refund;
				
				// let yyMerId = uni.getStorageSync('YY_Mer_Id');
				let yyMerId = item.mer_id;
				uni.navigateTo({
					url: '/pages/chat/customer_list/chath5?conversation_id=' 
					+ item.conversation_id 
					+'&conversation_status=' + status 
					+'&mer_id='+yyMerId
					+'&conversition_type=' + conversition_type
					+'&can_refund=' + can_refund
				});
			},

		},

	};
</script>
<style lang="scss">

	page {
		background-color: #f5f5f5;
	}

	.content {}

	.search {
		padding-left: 30rpx;
	}

	.search {
		padding: 20rpx 0;
		background-color: #fff;
	}

	.search .input {
		width: 588rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
		margin-left: 30rpx;
	}

	.search .input input {
		width: 472rpx;
		font-size: 28rpx;
	}

	.search .input .placeholder {
		color: #bbb;
	}

	.search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}

	.search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #282828;
	}

	/deep/.loadingicon {
		font-size: 28rpx;
		color: #969696;
		display: flex;
		align-items: flex-start !important;
	}

	.talk-content {
		.talk-item {
			margin: 50rpx 30rpx;
			border-radius: 10px;
			background-color: #fff;
			font-size: 30rpx;
			padding: 20rpx 0rpx;
			
			position: relative;
			.asknum{
				min-width: 15px;
				height: 15px;
				text-align: center;
				background-color: #fff;
				color: #fff;
				background-color: $yy-main-col;
				border-radius: 15rpx;
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				font-size: 10px;
				padding: 0 4px;
			}
			
		}

		.item-top {
			padding: 20rpx 30rpx 15rpx;
			//border-bottom: 1rpx dashed $yy-main-col;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			.item-time {
				color: $yy-main-col;
			}
			.item-type-box {
				.yyfont {
					font-size: 24rpx;
				}
				.yyfont:before {
					margin-right: 10rpx;
				}
				.item-type {
					padding: 6rpx 15rpx;
					border-radius: 10rpx;
				}
				.video {
					background-color: #DBF9EE;
				}
				.normal {
					background-color: #EBF1FE;
				}
			}
		}

		.bot-dot-box {
			height: 15rpx;
			display: flex;

			.dot {
				position: fixed;
				width: 30rpx;
				height: 30rpx;
				border-radius: 40rpx;
				background-color: #f5f5f5;
			}

			.left {
				left: 15rpx;
			}

			.right {
				right: 15rpx;
			}

			.line {
				width: 700rpx;
				border-bottom: 1rpx dashed $yy-main-col;
			}
		}

		.item-bot {
			padding: 30rpx 30rpx 0rpx;

			.doctor {}

			.patient-box {
				padding: 20rpx 0rpx;
				display: flex;
				justify-content: space-between;
			}

			.status-ing {
				color: #ff0000;
			}
			.status-cancel {
				color: #969696;
			}
		}
	}
</style>
